<script setup>
import { toRefs } from 'vue'
import { formattedTime, musicLevel } from '../common/index'
import PlayIcon from './PlayIcon.vue'
import { storeToRefs } from 'pinia'
import { useMusicStore } from '../store/music'

const musicStore = useMusicStore()
const { playMusic, isPlay } = storeToRefs(useMusicStore())

const props = defineProps({
  item: {
    type: Object,
    default() {
      return {}
    }
  }
})
const { item } = toRefs(props)

const songPlay = () => {
  if(playMusic.value.id === item.value.id) {
    musicStore.isPlay = !isPlay.value
    return
  }
  musicStore.selectSongPlay(item.value)
}
</script>

<template>
  <div class="songs-item">
    <img class="song-image" :src="item.album.picUrl" alt="picUrl" />
    <div class="songs-info">
      <div class="info-name">
        <span class="song-name">{{ item.name }}</span>
        <span class="song-level">{{ musicLevel(item.privilege.downloadMaxBrLevel).name }}</span>
        <span v-if="item.mvid" class="song-mv">MV<span class="iconfont icon-bofang"></span></span>
      </div>
      <div class="singer-name">
        <span v-for="(n , index) in item.artists" :key="n.id" class="m-artist">
            {{ n.name + (index+1!==item.artists.length?'/':' ') }}
        </span>
      </div>
    </div>
    <div class="song-option">
      <span @click="songPlay" :class="`iconfont ${playMusic.id === item.id && isPlay ?'icon-zanting':'icon-bofang'}`"></span>
      <span class="iconfont icon-aixin"></span>
      <span class="iconfont icon-wenjianjia"></span>
    </div>
    <div v-if="playMusic.id !== item.id" class="song-duration">{{ formattedTime(item.duration) }}</div>
    <play-icon v-if="playMusic.id === item.id"/>
  </div>
</template>

<style scoped lang="scss">
.songs-item {
  height: 50px;
  display: flex;
  align-items: center;
  margin-top: 12px;
  cursor: pointer;
  position: relative;
  &:hover {
    .song-option {
      display: flex;
      align-items: center;
    }
  }
}
.song-image {
  width: 50px;
  height: 50px;
  border-radius: 6px;
}
.songs-info {
  flex: 1;
  height: 50px;
  margin-left: 6px;
  font-size: 13px;
  letter-spacing: 1px;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.info-name {
  flex: 1;
  display: flex;
  align-items: flex-start;
}
.song-name {
  display: inline-block;
  max-width: 140px;
  color: #000;
  font-weight: 600;
  line-height: 16px;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.singer-name {
  font-size: 12px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
}
.song-duration {
  font-size: 14px;
  color: #32363f;
  letter-spacing: 1px;
}
.song-level {
  border: 1px solid #FFD700;
  color: #FFD700;
  border-radius: 2px;
  padding: 1px 2px;
  font-size: 8px;
  letter-spacing: 1px;
  margin-right: 4px;
}
.song-mv {
  border: 1px solid #FF4136;
  color: #FF4136;
  border-radius: 2px;
  padding: 1px 2px;
  font-size: 8px;
  letter-spacing: 1px;
  margin-right: 4px;
  .iconfont {
    font-size: 7px;
  }
}
.song-option {
  color: #000;
  display: none;
  transition: all .5s;
  position: absolute;
  right: 45px;
  .iconfont {
    margin: 0 4px;
  }
}
</style>
